import { getAssetsImages } from '@/utils'
import { defineComponent, ref } from 'vue'
import styles from './serviceContent.module.less'
// 服务
export default defineComponent({
  setup() {
    const listBox = ref([
      {
        img1: getAssetsImages('deng.png'),
        img2: getAssetsImages('dengRed.png'),
        title: '我们的宗旨',
        content: '没有什么比你的满意更重要。这就是为什么我们有100％的满意保证。',
        hover: false
      },
      {
        img1: getAssetsImages('qiu.png'),
        img2: getAssetsImages('qiuRed.png'),
        title: '材料方面',
        content:
          '已知保持高性能指数，均达到或优于国家标准要求，并通过权威部门检验，有效避免室内污染，确保家居环保环境家居环保环境。',
        hover: false
      },
      {
        img1: getAssetsImages('gong.png'),
        img2: getAssetsImages('gongRed.png'),
        title: '工程方面',
        content:
          '拥有一支专业稳定的施工队伍，凭借一流的技术水平、十余年施工经验、科学的施工工艺、严格的施工规范和高效的监督管理，确保您质量无忧。',
        hover: false
      },
      {
        img1: getAssetsImages('se.png'),
        img2: getAssetsImages('seRed.png'),
        title: '设计领域',
        content:
          '力求将环保理念贯穿于设计、施工、产品和材料等每一个环节中，为广大装修业主提供更多元化个性定制设计服务。选龙发是您最对的选择。',
        hover: false
      }
    ])
    return () => (
      <div class={styles['service-container']}>
        <div class={styles['service-content']}>
          <p class={styles['header-text']} data-aos="fade-up">
            我们的服务
          </p>
          <p class={styles['sub-text']} data-aos="fade-up" data-aos-delay="100">
            专业设计团队打造/最实惠的计价方式/专为您量身打造的风格
          </p>
          <ul class={styles['list-group']}>
            {listBox.value.map(item => {
              return (
                <li
                  class={styles['li-box']}
                  onMouseenter={() => (item.hover = true)}
                  onMouseleave={() => (item.hover = false)}
                  data-aos="fade-up"
                  data-aos-delay="200"
                >
                  <img class={styles['left-img']} src={item.hover ? item.img1 : item.img2}></img>
                  <div class={styles['right-box-text']}>
                    <p class={styles.text1}>{item.title}</p>
                    <p class={styles.text2}>{item.content}</p>
                  </div>
                </li>
              )
            })}
          </ul>
        </div>
      </div>
    )
  }
})
